import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import WeUI from 'react-weui';
import 'whatwg-fetch';
import EXIF from '../../../assets/js/exif.js';

const {
    CellFooter,
    CellsTitle,
    Cells,
    Cell,
    CellBody,
    Input,
    ButtonArea,
    Button,
    TextArea,
    Toptips,
    Toast,
    NavBar,
    NavBarItem,
    Dialog,
    Tab,
    Select,
    CellHeader,
    Label
} = WeUI;
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/CreateTeamStyle.css';
import $ from 'jquery';
let height = document.body.clientHeight;
export default class CreateStaff extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.state = {
            teamGroupId: this.props.location.query.teamGroupId, //部门id
            userId: this.props.location.query.userId, //员工id
            teamId: this.props.location.query.teamId, //团队Id
            teamName:this.props.location.query.teamName,
            showToptips: false,
            showLoading: true,
            showToast: false,
            toastTimer: null,
            topTipsMsg: "服务器异常!",
            showTopMsg: "",
            image: "'/iot-meeting/assets/images/header_img.png'",
            staffName: "",
            staffPhone: "",
            role_select:null,
        }
    }

    showToast() {
        this.setState({showToast: true, showLoading: false});
        this.state.toastTimer = setTimeout(() => {
            this.setState({showToast: false});
            location.replace("#/DepartmentInfo?teamGroupId=" + this.state.teamGroupId + "&teamId=" + this.state.teamId + "&teamName=" + this.state.teamName);
        }, 2000);
    }

    showWarn(error) {
        this.setState({showToptips: true, topTipsMsg: error, showLoading: false,});
        this.state.warnTimer = setTimeout(() => {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() {
        window.removeEventListener('resize', this.onWindowResize.bind(this))
        this.getStaffInfo();
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onWindowResize.bind(this))
    }

    //监听键盘弹起
    onWindowResize(){
        let h = document.body.clientHeight;
        if(h < height){
            $(".button_box").hide();
        }else{
            $(".button_box").show();
        }
    }

    //获取员工信息
    getStaffInfo() {
        let self = this;
        fetch(getHost() + "/team/group/user/" + this.state.userId +"?teamGroupId="+this.state.teamGroupId+"", {
            method: 'GET',
            credentials: 'include',
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    let role_select = null;
                    if(data.data.isAdmin){
                        role_select = 2;
                    }else{
                        role_select = 1;
                    }
                    self.setState({
                        showLoading: false,
                        staffName: data.data.teamUserName,
                        staffPhone: data.data.teamUserPhone,
                        userId: data.data.id,
                        role_select:role_select
                    });
                } else {
                    self.showWarn(data.error.message);
                }
            }).catch(e => {
        });
    }

    LeftClick() {

    }
    //确认修改
    confirmEdit() {
        this.setState({
            showLoading: true
        });
        if (this.state.staffName.length > 0 && this.state.staffPhone.length > 0) {
            let self = this;
            let fromData = new FormData();
            fromData.append("name", this.state.staffName);
            fromData.append("phone", this.state.staffPhone);
            fromData.append("teamGroupId", this.state.teamGroupId);
            if(this.state.role_select == "1" || this.state.role_select == 1){
                fromData.append("isAdmin",false);
            }else{
                fromData.append("isAdmin",true);
            }
            fetch(getHost() + "/team/group/user/modify/" + this.state.userId, {
                method: 'POST',
                credentials: 'include',
                body: fromData,
            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        self.state.showTopMsg = "修改成功";
                        self.showToast();
                    } else {
                        self.showWarn(data.error.message);
                    }
                }).catch(e => {
                self.showWarn("服务器错误！");
            });
        } else {
            this.showWarn("信息不完整");

        }
    }

    //删除
    deleteStaff() {
        this.setState({
            showLoading: true
        });
        let self = this;
        fetch(getHost() + "/team/group/user/"+this.state.teamGroupId + "/" + this.state.userId,{
            method: 'DELETE',
            credentials: 'include',
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    self.state.showTopMsg = "删除成功";
                    self.showToast()
                } else {
                    self.showWarn(data.error.message);
                }
            }).catch(e => {
            self.showWarn("服务器错误！");
        });
    }

    //名字
    handleStaffName(e) {
        this.setState({
            staffName: e.target.value
        })
    }
    //电话
    handleStaffPhone(e) {
        let value =  e.target.value;
        if(value.length <= 11){
            this.setState({
                staffPhone: e.target.value
            })
        }
    }
    //选择角色
    selectChange(e){
        this.setState({
            role_select:e.target.value
        })
    }

    render() {
        return (
            <div style={{height: '100%'}}>
                <NavigationBar Title="员工管理" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <CellsTitle>请输入员工信息</CellsTitle>
                <Cells style={{background: "white"}}>
                    <Cell>
                        <CellBody style={{height: "2.4rem"}}>
                            <div className="department_title">姓名</div>
                            <Input className="department_input" placeholder="请输入员工姓名" maxLength="20"
                                   value={this.state.staffName} onChange={this.handleStaffName.bind(this)}/>
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                    <Cell>
                        <CellBody style={{height: "2.4rem"}}>
                            <div className="department_title">电话</div>
                            <Input className="department_input"  style={{color:"#B2B2B2"}} readOnly="readOnly" type="number"
                                   placeholder="请输入员工电话" value={this.state.staffPhone} onChange={this.handleStaffPhone.bind(this)}/>
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                    <Cell>
                        <CellHeader>
                            <Label className="role_title">角色</Label>
                        </CellHeader>
                        <CellBody style={{height: "2.4rem"}}>
                            <Select  value={this.state.role_select}  className="select_role" onChange={this.selectChange.bind(this)}>
                                <option value="1">员工</option>
                                <option value="2">管理员</option>
                            </Select>
                            <div className="arrows_icon"/>
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                </Cells>
                <div className="button_box">
                    <ButtonArea direction="horizontal">
                        <Button className="confirmSave_btn" onClick={this.confirmEdit.bind(this)}>确认修改</Button>
                    </ButtonArea>
                    <ButtonArea direction="horizontal">
                        <Button type="default" className="confirmSave_btn"
                                onClick={this.deleteStaff.bind(this)}>删除此员工</Button>
                    </ButtonArea>
                </div>
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
                <Toast icon="success-no-circle" show={this.state.showToast}>{this.state.showTopMsg}</Toast>
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
            </div>
        )
    }
}